<template>
  <div class="editor-wrapper">
    <toolbar :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <editor
      v-model="html"
      :style="{ height: height + 'px' }"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
    <div v-if="maxlength" class="useful-num">{{ useLen }}/{{ maxlength }}</div>
  </div>
</template>

<script>
import { uploadEdiorImg } from "@/api/core/question";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "answerEditor",
  components: {
    Editor,
    Toolbar,
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    propValue: {
      type: String,
      default: "",
    },
    maxlength: {
      type: Number,
      default: 0,
    },
    height: {
      type: [String, Number],
      default: 300,
    },
  },
  watch: {
    propValue: {
      handler(newVal, oldVal) {
        this.html = newVal;
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true,
    },
    modelValue: {
      handler(newVal, oldVal) {
        this.html = newVal;
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true,
    },
  },
  data() {
    let self = this;
    return {
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容",
        MENU_CONF: {
          uploadImage: {
            maxNumberOfFiles: 1,
            allowedFileTypes: ["image/*"],
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
            // // 自定义图片上传功能
            customUpload: (resultFile, insertImgFn) => {
              const formData = new FormData();
              formData.append("picture", resultFile);
              // 将文件上传至服务器，res.data返回服务器存放文件的url
              uploadEdiorImg(formData).then((res) => {
                // 插入图片，三个参数分别对应，url alt href
                insertImgFn(res.url, "img", res.url);
              });
            },
          },
        },
      },
      mode: "simple", // or 'simple'
      useLen: 0,
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange() {
      const text = this.editor.getText();
      // 计算当前输入了多少文字
      this.useLen = (text || "").length;
      // 每次富文本内容改变，触发change事件
      this.$emit("change", this.html);
      this.$emit("update:modelValue", this.html);
    },
  },
  beforeDestroy() {
    // editor销毁
    const editor = this.editor;
    if (editor == null) {
      return;
    }
    editor.destroy();
  },
};
</script>

<style lang="scss">
.editor-wrapper {
  z-index: 3;
  position: relative;
  .w-e-toolbar {
    z-index: 2 !important;
    border: solid 1px #e6e9ec !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    .w-e-bar-item {
      padding: 1px;
    }
  }
  .w-e-text-container {
    z-index: 1 !important;
    border: solid 1px #e6e9ec !important;
    border-top: none !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
.useful-num {
  position: absolute;
  right: 6px;
  bottom: 10px;
  z-index: 99999;
  font-size: 12px;
  color: #ccc;
  background: #fff;
  padding: 0 6px;
  height: 28px;
  line-height: 28px;
}
</style>
